<!DOCTYPE html>
<html>
<head>
  <base href="/">
  <title>标题</title>
  <meta content="no-cache" http-equiv="pragma">
  <meta content="no-cache" http-equiv="cache-control">
  <meta content="0" http-equiv="expires">
  <meta content="keyword1,keyword2,keyword3" http-equiv="keywords">
  <meta content="This is my page" http-equiv="description">

  <link href="/Css/bootstrap.css" rel="stylesheet" type="text/css"/>
  <link href="/Css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
  <link href="/Css/style.css" rel="stylesheet" type="text/css"/>


  <link href="/bui/assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
  <link href="/bui/assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
  <link href="/bui/assets/css/page-min.css" rel="stylesheet" type="text/css"/>


  <script src="/bui/assets/js/jquery-1.8.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      // 二、打印
      $('#print').click(function () {
        $('#hib').css('display', 'none');
        window.print();
        $('#hib').css('display', 'block');
      });
      // 三、导出excel
      $('#excel').click(function () {
        var num = $('.dataTable').length;
        if (num == 0) {
          alert("当前没有数据可以导出，请查询后再导出excel");
          return false;
        }
        var con = $('#con').val();
        location.href = "excel.do?method=excel&con=" + con;

      });
    });
  </script>

</head>
<body>
<table class="table table-bordered table-hover definewidth m10" id="hib">
  <tr>
    <td class="tableleft" rowspan="2" style="text-align: center ;height:50px;line-height: 50px;"
        width="10%">
      <select id="select_year" name="type">
        <option
            th:each="year : ${years}"
            th:text="${year }"
            th:value="${year }"
        ></option>
      </select>
    </td>
    <td style="text-align: center;height:50px;line-height: 50px;" width="60%">
        <span data-sign1="select_but" style="display: none" th:data-sign2="${yearMonth.key}"
              th:each="yearMonth : ${yearMonths}">
          <button class="btn btn-success"
                  th:text="${yearMonth.key } + '年全部数据'"
                  th:value="${yearMonth.key }"
                  type="button"
          ></button>&nbsp;&nbsp;&nbsp;&nbsp;

          <span th:each="m : ${yearMonth.value}">
            <button class="btn btn-primary"
                    th:text="${m} + '月'"
                    th:value="${yearMonth.key } + '-' + ${m}"
                    type="button"
            ></button>&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
        </span>
    </td>
  </tr>
  <tr>
    <td class="tableleft" colspan="2" style="text-align: center ;height:50px;line-height: 50px;">
      <a class="btn btn-success" id="print">打印</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <!--<a class="btn btn-success" id="excel">导出Excel</a>
      <input id="con" type="hidden" value=""/>-->
    </td>
  </tr>
</table>


<div class="container">
  <div class="row">
    <div class="span24" id="canvas" style="height: 500px;width: 70%;"></div>
    <div id="context" style="height: 500px;width: 25%;float: left;display:none;">
      <table class="table table-bordered table-hover definewidth m10" id="t2">
        <thead>
        <tr>
          <td class="tableleft" colspan="2" id="ti" style="text-align: center;"></td>
        </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

<table class="table table-bordered table-hover definewidth m10" id="table" style="width: 90%">
</table>


<script src="/bui/assets/js/bui-min.js" type="text/javascript"></script>
<script src="/bui/assets/js/config-min.js" type="text/javascript"></script>
<script src="/echarts-5.4.2/echarts.min.js"></script>
<script type="text/javascript">

  BUI.use('common/page');

  $('#select_year').change(function () {
    var year = $(this).val();
    $('span[data-sign1=select_but]').hide();
    $('span[data-sign2=' + year + ']').show();
    // 默认显示最后一个月的数据
    $('span[data-sign2=' + year + ']').find("button:last()").trigger("click");
  });

  $('button').click(function () {
    var date = $(this).val();
    $.getJSON('/account/month', {"method": "lookMon", "date": date}, function (data) {
      // 1.将目前的查询条件写在页面上
      $('#con').val(date);
      // 2.将表格的样式改为块级标签
      //$('#table').css('display', true);
      // 3.清空原有的数据
      $('#table').empty();
      // 4.添加表头信息
      $('#table').append("<thead><tr>" +
          "<th style='width: 10%;'>编号</th>" +
          "<th style='width: 20%;'>消费时间</th>" +
          "<th style='width: 20%;'>类别</th>" +
          "<th style='width: 20%;'>详情</th>" +
          "<th style='width: 20%;'>消费金额</th>" +
          "<th style='width: 30%;'>描述</th>" +
          "</tr></thead>");
      // 5.添加表单内容
      var da = data.list;
      for (var i = 0; i < da.length; i++) {
        var dateTime = new Date(da[i].consumeDate);
        var year = dateTime.getFullYear();
        var month = dateTime.getMonth() + 1;
        var day = dateTime.getDate();

        $('#table').append(
            "<tr class='dataTable'><td>" + (i + 1) + "</td><td>" + (year + "-" + month + "-" + day)
            + "</td><td>" + da[i].typeName
            + "</td><td>" + da[i].typeDetailName
            + "</td><td>" + da[i].price + "</td><td>" + da[i].description + "</td></tr>");

      }
      // 6.添加表尾数据
      $('#table').append("<tfoot style='background-color: #aa66ff'>" +
          " <tr><td>消费天数</td><td>" + data.num +
          "</td><td colspan='2'>合计消费</td><td>" + data.sum +
          "</td><td>平均每日消费：" + data.avg + "</td></tr></tfoot>");

      // 7.生成消费类别表格
      $('#t2').empty();//清空原来的数据
      $('#context').css("display", "block");//显示明细框
      //生成表头
      $('#t2').append(
          "<thead><tr><td class='tableleft' id='ti' style='text-align: center;' colspan='2'></td></tr></thead>");
      $('#ti').text(date + "消费记录");//写标题
      $('#t2').append(data.table);//写数据
      $('#t2').append("<tfoot style='background-color: #a6f'>" +//写表尾
          "<tr><td>合计消费</td><td>" + data.sum + "</td></tr></tfoot>");

      // 8.生成饼形图
      // 初始化 ECharts 实例
      var myChart = echarts.init(document.getElementById('canvas'));
      var pieData = data.pie;
      // 配置图表选项
      var option = {
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b}: {c} ({d}%)'
          formatter: function (params) {
            return `${params.seriesName}：${params.data.name}
                <br> 费用：${params.data.value} ￥
                <br> 占比：${params.data.percent} %`;
          }
        },
        series: [
          {
            name: '消费类型',
            type: 'pie',
            radius: [0, '40%'],
            // label: {
            //   position: "inner",
            // },
            // labelLine: {
            //   show: false,
            // },
            data: pieData.map(function (item) {
              return {
                name: item.name,
                value: item.value,
                percent: item.percent
              };
            })
          },
          {
            name: '消费详情',
            type: 'pie',
            radius: ['60%', '80%'],
            label: {
              formatter: function (params) {
                return `{a|${params.seriesName}：${params.data.parentName}>>${params.data.name}\n}{hr|}\n{b|费用：${params.data.value}元}\n{per|占比：${params.data.percent} %}\n`;
              },
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "left",
                  padding: [2, 4],
                },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 12,
                  lineHeight: 15,
                  align: "left",
                  padding: [2, 4],
                },
                per: {
                  color: "#eee",
                  align: "left",
                  backgroundColor: "#334455",
                  padding: [2, 2],
                  borderRadius: 2,
                },
              },
            },
            data: pieData.reduce(function (arr, item) {
              return arr.concat(item.children.map(function (child) {
                return {
                  name: child.name,
                  value: child.value,
                  percent: child.percent,
                  parentName: item.name
                };
              }));
            }, [])
          }
        ]
      };

      // 使用配置项显示图表
      myChart.setOption(option);

    }, 'json');
  });

  // 默认现在图表
  $('#select_year').trigger("change");
</script>
</body>
</html>

